<template>
    <div class="mypage">
        <el-container>
            <el-aside width="20%">
                <navmenu :currentpage="'2'" />
            </el-aside>
            <el-container>
                <el-main>
                    <div class="doctorinfo">
                        <div class="avatarbox">
                            <el-image
                            style="width: 100px; height: 100px; margin-top: 50px; border-radius:50px"
                            :src="doctorinfo.avatarUrl"></el-image>
                        </div>
                        <p>姓名：&nbsp;{{doctorinfo.doctorName}}</p>
                        <p>所属机构：&nbsp;{{doctorinfo.orgName}}</p>
                        <p>所属科室：&nbsp;{{doctorinfo.deptId}}</p>
                        <p>职位：&nbsp;{{doctorinfo.levelName}}</p>
                    </div>
                </el-main>
                <el-footer class="buttonbox">
                    <el-button type="primary" >修改信息</el-button>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import navmenu from '../components/navmenu.vue'
export default {
    components:{
        navmenu
    },
    data(){
        return{
            doctorinfo:this.GLOBAL.doctorinfo
        }
    }
}
</script>

<style scoped>
    .buttonbox{
        display: flex;
        justify-content: flex-end;
        border-top:1px solid #d4d4d4;
        box-shadow: #e4e4e4 0 -5px 5px 0;
    }
    .el-button{
        position: relative;
        top: 50%; /*偏移*/
        transform: translateY(-50%);
        height: 40px;
    }
    .doctorinfo{
        margin-left: 5%;
        position: relative;
        top: 25%; /*偏移*/
        transform: translateY(-50%);
        font-size: 20px;
    }
</style>